<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/rudang.css">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
</head>

<body>
    <div class="counter" id="counter">
        <button @click="change" id="show">切换显示状态</button>
        <button class="button" style="margin-left: 500px;" @click="age+=1">增加年龄</button>
        <button class="button" @click="age-=1">减小年龄</button>
        <br>
        <br>
        <div class="item" style="margin-left: 595px;"><b>年龄满足18岁,可以入党。目前年纪：{{age}}</b></div>
        
        < img v-show="show==true" src="image/01.jpg" alt="">
        < img class="image" v-show="age>18" src="image/00.jpg" alt="">
    
    </div>
</body>
<script>
    const a = {
        data() {
            return {
                age:15,
                show:false
            }
        },
        methods:{
                change(){
                    this.show = !this.show;
                }
            }
    }
    Vue.createApp(a).mount('#counter')
</script>
</html>